<template>
  <div>
    <video class="video" ref="videoPlayer" :src="videoSrc" @click="toggleFullScreen"></video>
  </div>
</template>

<script>
export default {
  props: {
    videoSrc: {
      type: String,
      required: true
    }
  },
  methods: {
    toggleFullScreen() {
      const videoPlayer = this.$refs.videoPlayer;
      if (videoPlayer.requestFullscreen) {
        videoPlayer.requestFullscreen();
      } else if (videoPlayer.webkitRequestFullscreen) {
        videoPlayer.webkitRequestFullscreen();
      } else if (videoPlayer.mozRequestFullScreen) {
        videoPlayer.mozRequestFullScreen();
      } else if (videoPlayer.msRequestFullscreen) {
        videoPlayer.msRequestFullscreen();
      }
    }
  }
};
</script>
<style scoped>
.video{
  height: 100%;
  width: 100%;
}
</style>
